<template >
  <div class="home-box">
    <!-- 首页分类列表 start -->
    <div v-for="(Data,i) in homeData " :key="'home'+i">
      <div class="list-name">
        <span>{{Data.typeName}}</span>
        <!-- <span class="list-more">更多 ></span> -->
        <router-link :to="`/films?typeId=${Data.typeId}&typeName=${Data.typeName}`" tag="span" class="list-more" >更多 ></router-link>
      </div>
      <div class="list-content">
          <conten v-for="(film,index) in Data.list" :key="'con'+index"   :film="film"></conten>
      </div>
    </div>
  </div>
</template>
<script>
import conten from '../components/conten'
export default {
    data(){
      return{
        homeData:[]
      }
    },
    methods:{
      async loadHomeData(){
        //分类项
        await this.$api.loadTypeList()
        .then((data)=>{
          if(data.resultState){
            this.homeData = data.result
          }else{
            return Promise.reject(data.msg)
          }          
        })
        .catch((error)=>{
          console.log(error);
        })
        
      for(let i=0 ; i< this.homeData.length ; i++){
        this.$api.loadFilmsByParams({ typeId:this.homeData[i].typeId})
        .then((data)=>{
          if(data.resultState){
            console.log(data)
            this.$set(this.homeData[i],"list",data.result)
          }else{
              return Promise.reject(data.msg);
          }
        })
        .catch((error)=>{
          console.log(error);
        })
      }



      }
    },
    mounted() {
      this.loadHomeData()
    },
    components:{
        conten
    },
}
</script>
<style lang="less" scoped>
.home-box{
    position: absolute;
    top: 0rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    overflow-y: auto;
}
.list-content{
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 0.1rem;
    font-size: 0rem;
    &::after{
        content: "";
        width: 0.1rem;
        display: inline-block;
    }
}

</style>